<template>
  <h1>Hello Vue3</h1>
  <h2>{{ number }}</h2>
  <h3>{{ msg }}</h3>
  <button @click="number++">点击累加</button>
  <button @click="msg += '!'">点击打招呼</button>
</template>

<script>
import { ref, watch } from 'vue'
/* 
  目标：掌握使用 watch 函数定义侦听器

*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')
    // 情况1：监听 ref 定义的响应式数据
    const number = ref(0)
    const msg = ref('你好呀~')

    // 🔔 Vue3 组合式API的 watch 写法
    // watch(number, (newVal, oldVal) => {
    //   console.log('number发生了变化', { newVal, oldVal }, number.value)
    // })

    // watch(msg, (newVal, oldVal) => {
    //   console.log('msg发生了变化', { newVal, oldVal }, msg.value)
    // })

    // 情况2：监听多个响应式数据数据
    watch([number, msg], (newVal, oldVal) => {
      // 注意点：newVal 和 oldVal 是数组类型
      console.log('number 或者 msg 发生变化', newVal)
    })

    return { number, msg }
  },
}
</script>

<style></style>
